<template>
  <div class="app-container height100">
    <div class="menu-navbar">
      <el-button type="primary" size="small" @click="edit()" style="z-index: 1;">
        编辑
      </el-button>
    </div>
    <el-form :model="record" label-position="top" size="small" label-width="110px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="分类名称" prop="name">
            <el-input v-model="record.name" placeholder="" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分类状态" prop="status">
            <el-select v-model="record.status" clearable placeholder="" :disabled="true">
              <el-option
                v-for="item in typeOptions"
                :key="item.type"
                :label="item.value"
                :value="item.type">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="排序号" prop="orderNo">
            <el-input v-model="record.orderNo" placeholder="" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="remarks">
            <el-input type="textarea"  v-model="record.remarks" placeholder="" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        orgid: '',
        deployVisible: false,
        updateVisible: false,
        record: {},
        appendlist: {},
        queryArgs: {
          condition: [
            {
              property: 'id',
              value: '',
              type: 'EQ'
            }
          ]
        },
        typeOptions: [
          {
            type: '0',
            value: '活动'
          },
          {
            type: '1',
            value: '禁用'
          },
          {
            type: '2',
            value: '删除'
          }
        ],
        count: 0,
        selectValue: 1,
        classifyOptions: [],
        natureOptions: []
      }
    },
    created() {
      this.fetchData()
    },
    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route.name': ['fetchData']
    },
    beforeRouteUpdate(to, from, next) {
      // just use `this`
      next()
      this.fetchData()
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.fetchData()
      })
    },
    methods: {
      fetchData() {
        this.loading = true
        this.queryArgs.condition[0].value = this.$route.params.id
        this.$store.dispatch('LibraryCategorySelect', this.queryArgs).then(res => {
          this.record = res.data.records[0]
          // this.subsyslist.condition[0].value = res.data.records[0].subsysid
          // console.log(this.appendlist)
          this.loading = false
        }).catch((err) => {
          console.log(err)
        })
      },
      edit() {
        this.$router.push({
          name: 'libraryCategoryEdit',
          params: {
            id: this.$route.params.id
          }
        })
      }
    }
  }
</script>
<style scoped>
  .height100{
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .menu-navbar{
    padding:10px;
    text-align: right;
  }
</style>
<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 100%;
  }
</style>
